<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>绑定样式</title>
		<style>
			.atguigu{
				border: 3px solid orange;
			}
			.classA{
				background-color: skyblue;
			}
			.classB{
				color: red;
			}
			.classC{
				text-shadow: 2px 2px 2px yellow;
			}
		</style>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!--
				1. 绑定class样式
							:class="xxx" xxx可以是字符串、对象、数组
				2. 绑定style样式
							:style="{fontSize: xxx + 'px' }"其中xxx是data中配置的属性
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h1 class="atguigu">1022班就业顺利！</h1>

			<!-- 动态绑定class样式 —— 字符串写法，适用于：类名不确定，要动态获取 -->
			<h1 class="atguigu" :class="myStyle">1022班就业顺利！</h1>

			<!-- 动态绑定class样式 —— 对象写法，适用于：类名确定，但不确定用不用 -->
			<h1 class="atguigu" :class="{classB:hasB,classC:hasC}">1022班就业顺利！!</h1>

			<!-- 动态绑定class样式 —— 数组写法，适用于：同时动态的绑定多个class样式-->
			<h1 class="atguigu" :class="[a,b,c]">1022班就业顺利！</h1>

			<!-- 绑定style样式 -->
			<h1 class="atguigu" :style="{fontSize:size}">1022班就业顺利！</h1>

		</div>

		<script type="text/javascript" >
			new Vue({
				el:'#root',
				data:{
					myStyle:'classA',
					hasB:true, //用于标识是否展示classB
					hasC:true, //用于标识是否展示classC
					a:'classA',
					b:'classB',
					c:'classC',
					size:'50px',
				}
			})

		</script>
	</body>
</html>